<template>
    <div class="gao clearfix">
        <div class="totem-background"></div>
        <h2>猜你喜欢</h2>
    </div>
    <div class="tou clearfix">
        <el-row class="wiath">
            <el-col v-for="item of item.data" :span="4" class="yin">
                <el-card :body-style="{ padding: '0px' }" shadow="never" class="border">

                    <img :src="item.imgUrl" style="width:143px;height: 192px;" class="image" />
                    <div>
                        <span>{{ item.itemName }}</span>
                        <p><span style="color:#ccc ;">票价：</span>￥{{ item.minPrice }} <span style="color:#ccc ;">起</span>
                        </p>
                    </div>
                    <div class="beijing">
                        <p>{{ item.itemName }}</p>
                        <p>{{ item.startDate }}</p>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>

</template>
<script setup>
import { postMultipleGetGuessYouLike } from '../../utils/api'
import { reactive } from 'vue'
import { split } from 'lodash';
const item = reactive({ data: [] });
async function search() {
    let { data } = await postMultipleGetGuessYouLike();
    item.data.length = 0;
    item.data.push(...data.data)

}
search();

</script>
<style scoped>
.tou {
    width: 1200px;
    margin: 0 auto;
}

span {
    font-size: 12px;
}

p {
    font-size: 12px;
}

.wiath {
    background-color: #fff;
    width: 1270px;
}

.border {
    border: 0px;
}

.totem-background {
    height: 50px;
    width: 618px;
    margin: 15px auto;
    background-image: url(/static/img/ribbon-totem.571264d.png);
}

h2 {
    font-weight: Bold;
    width: 130px;
    text-align: center;
    margin: auto;
    margin-top: -70px;
    text-transform: uppercase;
    font-size: 18px;
}

.gao {
    height: 80px;
}

.card-hide {
    width: 100%;
    padding: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    background-color: rgba(202, 61, 34, 0.9);
    position: absolute;
    left: 0;
    bottom: 0;
    display: none;
}

.beijing {
    background-color: rgba(202, 61, 34, 0.9);
    width: 143px;
    height: 68px;
    margin-top: -66px;
    position: absolute;
    color: #fff;
    box-sizing: border-box;
    display: none;
}

.border:hover .beijing {
    display: block;
    margin-top: -130px;
    transition: all .5s;
}

.beijing p {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    cursor: pointer;
    margin-left: 32px;
    height: 15px;
}
.beijing p:last-child{
    margin-left: 20px;
    margin-top: -5px;
}
</style>